<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="id1">1</div>
  </body>
  <script>
    let flushCallbacks = (m, callback) => {
      console.log('flushCallbacks!!!', m)
      console.log(callback)
    }
    let counter = 1
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    const id1Node = document.getElementById('id1')
    console.log('id1Node==', id1Node)
    const config = { attributes: true, childList: true, subtree: true }
    observer.observe(id1Node, config)

    let timerFunc = () => {
      // counter = (counter + 1) % 2
      // textNode.data = String(counter)
      id1Node.setAttribute('name', 'test1')
      id1Node.innerHTML = '22222'
      console.log('id1Node==222', id1Node)
    }
    timerFunc()
  </script>
</html>
